import React from "react";

// 注：只有类组件才有生命周期
class Test extends React.Component {
  componentWillUnmount() {
    console.log('test-componentWillUnmount');
  }
  render() {
    return (
      <div>test</div>
    )
  }
}

// react类组件
class App extends React.Component {
  constructor() {
    super()
    console.log('constructor');
    console.log(this.state);
    // 1.初始化state
    // 2.创建Ref
    // 3.使用bind解决this指向问题
  }
  state = {
    count: 0,
    flag: true,
  }
  componentDidMount() {
    console.log('componentDidMount');
    console.log(this.state);
    // 1.发送网络请求
    // 2.DOM操作
  }
  componentDidUpdate() {
    // 触发时机：组件更新后（DOM渲染完毕）
    // 可以获取更新后的DOM内容
    // 注：切勿在此处调用this.setState()方法
    console.log('componentDidUpdate');
    console.log(this.state);
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  changeFlag = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
  // 渲染ui结构
  render() {
    console.log('render');
    console.log(this.state);
    // 触发时机：每次组件渲染都会触发
    // 渲染UI
    // 注：切勿在此处调用this.setState()方法
    return (
      <>
        this is app
        <button onClick={ this.handleClick }>{ this.state.count }</button>
        <button onClick={ this.changeFlag }>change</button>
        { this.state.flag ? <Test></Test> : '' }
      </>
    )
  }
}

export default App;
